<template>
	<view class="background">

		<view class="launch">
			<u-form :model="values" ref="uForm" :rules="rules" :error-type="errorType">
				<view class="form-block">
					<u-form-item label="选择债务人" label-width="180" prop="user">
						<u-input v-model="values.user" type="select" @click="show=true" placeholder="请选择债务人" />
						<u-select v-model="show" :list="actionSheetList" ref="select" @confirm="actionSheetCallback"
							label-name="name" value-name="id">
							<template v-slot:name>
								<view >
									<u-input v-model="keywords" :border="true" placeholder="搜索债务人" @input="input" />
								</view>
							</template>
						</u-select>
					</u-form-item>
					<view class="show"></view>
					<u-form-item label="合约金额" label-width="180" prop="loan_money">
						<u-input v-model="values.loan_money" placeholder="请输入欠款金额" @input="calculation" />
					</u-form-item>
					<view class="show"></view>
					<u-form-item label="还款方式" label-width="180" prop="repay_type">
						<u-input v-model="values.repay_type" type="select" @click="repayment=true" placeholder="请选择还款方式" />
						<u-select v-model="repayment" :list="settingList" @confirm="confirm" title="选择还款方式">
						</u-select>
					</u-form-item>
					<view class="show" v-if="values.repay_type=='分期还款'"></view>
					<u-form-item label="分期设置" label-width="180" v-if="values.repay_type=='分期还款'" prop="install">
						<u-input v-model="values.install" type="select" @click="clickIntall" placeholder="请设置分期参数" />
						<u-select v-model="setting" :list="list" ref='periodization' @confirm="settingCallback"
							mode="mutil-column" @columnChange="columnChange" @cancel="cancel">
							<template v-slot:name>
								<view class="stages">
									<u-subsection :list="subsection" @change="change" :current="0" :bold="false"
										button-color="#E24D49" bg-color="#FFFFFF" active-color='#FFFFFF'></u-subsection>
								</view>
							</template>
						</u-select>
					</u-form-item>
				</view>
				
				<view class="form-block">
					<u-form-item label="借款用途" label-width="220" prop="loanpurpose" >
						<u-input v-model="values.loanpurpose" type="select" @click="loanpurposeVisible=true" placeholder="请选择借款用途" />
						<u-select v-model="loanpurposeVisible" :list="loanpurposeList" @confirm="loanpurposeConfirm" title="选择借款用途">
						</u-select>
					</u-form-item>
					<view class="show" ></view>
					<u-form-item label="转账方式" label-width="220" prop="zztype" >
						<u-input v-model="values.zztype" type="select" @click="zztypeVisible=true" placeholder="请选择转账方式" />
						<u-select v-model="zztypeVisible" :list="typeList" @confirm="zztypeConfirm" title="选择转账方式">
						</u-select>
					</u-form-item>
					<view class="show" ></view>
					<u-form-item label="还款日期" label-width="180" prop="repay_date" v-if="values.repay_type=='一次性还款'">
						<gpp-date-picker  @onConfirm="onConfirm" :startDate="startDate"
							:endDate="endDate" :defaultValue="values.repay_date" title="还款日期">
							{{values.repay_date}}
						</gpp-date-picker>
					</u-form-item>
					<view class="show"></view>
					<u-form-item label="年化利率" label-width="180" prop="year_rate">
						<u-input v-model="values.year_rate" placeholder="请填写年化利率数值" type="number" @input="calculation" />%
					</u-form-item>
					<view class="show"></view>
					<u-form-item label="合约总额" label-width="180" prop="total_money">
						<u-input v-model="values.total_money" :disabled="true" />元
					</u-form-item>
					<u-form-item label="借款事项" label-width="220" prop="remarks" class="remarks">
						 <textarea v-model="values.remarks"  class="textarea" placeholder-style="top:37%" placeholder="请填写借款备注事项"/>
					</u-form-item>
				</view>
				
				
			</u-form>
		</view>
		<view class="agreement">
			<u-checkbox-group active-color="#3775F6">
				<u-checkbox v-model="checked" size="24" label-size="24">已读</u-checkbox>
			</u-checkbox-group>
			<view class="tips" @click="treaty">
				《用户协议与隐私政策》
			</view>

		</view>

		<view class="padding">
			<view class="submit" @click="submit">提交</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import FormData from '@/components/form/index'
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import moment from 'moment'
	export default {
		data() {
			return {
				subsection: [{
						name: '灵活分期'
					},
					{
						name: '按月分期'
					},
				],
				repayment: false,
				show: false,
				setting: false,
				checked: false,
				keywords: '',
				timer: '',
				startDate: '2021-08-20',
				endDate: "2022-09-20",
				index: 0,
				errorType: ['toast'],
				loanpurposeVisible: false,
				loanpurposeList: [
					{label: '购房', value: '购房'},
					{label: '购车', value: '购车'},
					{label: '装修', value: '装修'},
					{label: '日常生产经营', value: '日常生产经营'},
					{label: '其他', value: '其他'}
				],
				zztypeVisible: false,
				typeList: [
					{label: '微信', value: '微信'},
					{label: '支付宝', value: '支付宝'},
					{label: '银行卡支付', value: '银行卡支付'}
				]
			}
		},
		components: {
			FormData,
			gppDatePicker
		},
		methods: {
			...mapMutations({
				changeStages: 'MAY_DEBT/CHANGE_STAGES', //获取分期设置
				assignment: 'MAY_DEBT/ASSIGNMENT', //选择债权人
				switchFlexible: 'MAY_DEBT/SWITCH_FLEXIBLE', //切换到灵活分期数据
				switchMonthly: 'MAY_DEBT/SWITCH_MONTHLY', //切换到按月分期数据
				changeListData: 'MAY_DEBT/CHANGE_LIST_DATA', //展示选择的期数
				changeInstallment: 'MAY_DEBT/CHANGE_INSTALLMENT', //设置按月分期初始值
				saveCycle: 'MAY_DEBT/SAVE_CYCLE', //保存周期跟期数
				againList: 'MAY_DEBT/AGAIN_LIST', //重置分期设置数据
				pickerDate: 'MAY_DEBT/PICKER_DATA', //拿到还款日期
				saveIndex: 'MAY_DEBT/SAVE_INDEX', //判断灵活还是分期
			}),
			...mapActions({
				getObligorList: 'MAY_DEBT/GET_OBLOGOR_LIST', //获取债务人列表
				calculate: 'MAY_DEBT/CALCULATE', //计算总额
				editDebitObligor: 'MAY_DEBT/EDIT_DEBIT_OBLIOR', //创建合约
			}),
			actionSheetCallback(e) {
				this.assignment(e[0])
			},
			confirm(e) {
				this.changeStages(e[0].label)
				this.calculation()
			},
			input() {
				this.getObligorList({
					username: this.keywords
				})
				this.timer = setTimeout(() => {
					this.$refs.select.init()
				}, 500)
			},
			loanpurposeConfirm(e) {
				this.values.loanpurpose = e[0].label
			},
			zztypeConfirm(e) {
				this.values.zztype = e[0].label
			},
			onConfirm(e) {
				this.pickerDate(e.dateValue);
				this.calculation()
			},
				clickIntall(){
             this.setting=true
			 this.saveIndex(0)
			},
			columnChange(e) {
				this.changeListData(e)
			},
			change(e) {
					this.saveIndex(e)
				if (e == 0) {
					this.switchFlexible()
				} else {
					this.switchMonthly()
				}
				this.timer = setTimeout(() => {
					this.$refs.periodization.init()
				}, 500)
			},
			//分期设置确定选中
			settingCallback(e) {
				this.saveCycle(e)
				this.calculation()
				this.timer = setTimeout(() => {
					this.againList()
				}, 500)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (Number(this.values.year_rate) > 15.4) {
							
							this.$refs.uToast.show({
								title: '利率范围：0~15.4%',
							})
							return
						}
						if(! this.checked){
							this.$refs.uToast.show({
								title: '请阅读用户协议与隐私政策',
							})
							return
						}
						this.editDebitObligor(this.index)
					}
				});
			},
			//分期设置取消按钮
			cancel() {
				this.againList()
			},
			calculation() {
				let values = JSON.parse(JSON.stringify(this.values))
				if (this.values.repay_type == '一次性还款') {
					if (this.values.loan_money && this.values.year_rate && this.values.repay_date) {
						values.repay_type = '1'
						values.preview = '1'
						this.calculate(values)
					}
				} else {
					if (this.values.loan_money && this.values.year_rate && this.values.install) {
						if (this.index = 0) {
							values.repay_type = '3'
						} else {
							values.repay_type = '2'
						}
						values.preview = '1'
						this.calculate(values)
					}
				}

			},
			//查看用户协议
			treaty() {
				uni.navigateTo({
					url: '/pages/loanee/mayDebt/agreement',
				})
			},
		},
		mounted() {

			this.getObligorList()
		},
		onUnload: function() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		async created() {
			let time = await moment(new Date()).add(60, "months");
			this.endDate = await moment(time).format('YYYY-MM-DD')
			this.startDate = await moment(new Date()).format('YYYY-MM-DD')
			let date =await moment(new Date()).add(1, "day");
			let pickerDate =await moment(date).format('YYYY-MM-DD')
			this.changeInstallment(pickerDate)
		},
		watch: {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			...mapState({
				values: (state) => state.MAY_DEBT.values,
				fields: (state) => state.MAY_DEBT.fields,
				rules: (state) => state.MAY_DEBT.creditorRules,
				actionSheetList: (state) => state.MAY_DEBT.actionSheetList,
				settingList: (state) => state.MAY_DEBT.settingList,
				list: (state) => state.MAY_DEBT.list,
			})
		}
	}
</script>

<style scoped lang='scss'>
@import '@/common/launch.scss';
	
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>
